/**
 * Created by zl206 on 2016/11/27.
 */


$(function () {
    function showBorder() {
        $(".color .out").css("border","none");
        var color=$(this).css("background-color");
        this.parentNode.style.border="1px solid "+color;
    }
    showBorder.call($(".color .in")[0]);
    $(".checkout_cart .item")[1].onclick=showCart;
    $(".color .in").click(showBorder);
    $(".add_btn div").click(checkAndSubmit);
    $(".size").change(hideSizeError);
    $(".check_photo").click(showBigPhoto).hover(hideMagnifier,showMagnifier);
    $(".close").click(closePhoto);
    $(".photo_main").hover(showMagnifier,hideMagnifier).mousemove(moveMagnifier);
    $(".nav_menu .nav_item").click(navToggle);
    $("*").click(closeList);

    function showCart() {
        $(".cart_model").slideToggle("linear");
    }
    function showMenuList() {
        $(this).addClass("active");
        var text=this.innerText;
        var x=this.getBoundingClientRect().left;
        var y=this.getBoundingClientRect().bottom;
        showList(x,y);
        switch (text){
            case "Men Clothing":
                break;
            case "Women Clothing":
                break;
            case "Men Shoes":
                break;
            case "Women Shoes":
                break;
            case "Kid Clothing":
                break;
            case "Kid Shoes":
                break;
        }
    }
    function showList(x,y) {
        $(".menu_list1").css({left:x,top:y}).show();
    }
    function clearActive() {
        $(".menu span").removeClass("active");
        $(".menu_list1").hide();
    }
    function checkAndSubmit() {
        var size=$(".chose select").val();
        if(!size){
            showSizeError();
        }
    }
    function showSizeError() {
        $(".size_error").slideDown();
        shakeSize();
    }
    function hideSizeError() {
        $(".size_error").slideUp();
    }
    function shakeSize() {
        $(".size").animate({"padding-left":"10px"},100).animate({"padding-left":"0"},100);
        $(".size").animate({"padding-left":"10px"},100).animate({"padding-left":"0"},100);
    }
    function showBigPhoto() {
        $(".check_panel").removeClass("hide");
        $(".cover").removeClass("hide");
    }
    function closePhoto() {
        $(".check_panel").addClass("hide");
        $(".cover").addClass("hide");
    }
    function showMagnifier() {
        $(".magnifier_panel").show();
    }

    function hideMagnifier() {
        $(".magnifier").hide();
        $(".magnifier_panel").hide();
    }
    function moveMagnifier(e) {
        var x=e.offsetX-58;
        var y=e.offsetY-58;
        var img=$(".photo_main img")[0];
        var width=img.width;
        var height=img.height;
        var rote=452/height;
        var roteY=height/116*rote;
        var roteX=width/116*rote;
        $(".magnifier_show").css({
            "background-position":Math.floor((x)*100/(width*rote-116))+"% "+Math.floor((y)*100/(height*rote-116))+"%",
            "background-size":Math.floor(roteX*100)+"% "+Math.floor(roteY*100)+"%"
        });
    }
    function navToggle() {
        $(".nav_menu .nav_item").removeClass("active");
        $(this).addClass("active");
    }
    function closeList() {
        var temp=this;
        if($(this).hasClass("menu_item"))setTimeout(function () {
            showMenuList.call(temp);
        },50);
        clearActive();
    }
});